<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天猫商城列表页</title>
    <link type="text/css" rel="stylesheet" href="css/indexcss.css">
</head>
<body>
<!--广告栏的部分-->
    <div id="adv"><img src="img/adv.png"></div>
    <div id="site-nav">
    	<div id="sn-bd">
    		<span class="ma20"><i class="icon"><img src="img/房子.png" width="12" height="13"></i><a href="#">天猫首页</a></span>
    		<span><span class="ma20">喵，欢迎来天猫</span>
    			<a href="#" class="pa10">请登录</a>
    			<a href="#" class="pa10">免费注册</a>
    		</span>
    		<ul id="nav-ul">
    			<li><a href="#" class="sn-b sn-hd">我的淘宝<b><img src="img/下三角.png" width="12"></b></a></li>
    			<li class="sn-b"><a href="#" class="sss"><i class="icon"><img src="img/xin.png" width="12" height="13"></i>我关注的品牌</a></li>
    			<li class="sn-b"><a href="#"><i class="icon"><img src="img/购物车.png" width="12" height="13"></i>购物车0件</a></li>
    			<li><a href="#" class="sn-b sn-hd bor-ri">收藏夹<b><img src="img/下三角.png" width="12"></b></a></li>
    			<li class="sn-b"><a href="#"><i class="icon"><img src="img/手机.png" width="12" height="13"></i>手机版</a></li>
    			<li class="sn-b"><a href="#">淘宝网</a></li>
    			<li class="sn-b"><a href="#">企业沟</a></li>
    			<li><a href="#" class="sn-b sn-hd">商家支持<b><img src="img/下三角.png" width="12"></b></a></li>
    			<li><a href="#" class="sn-b sn-hd"><i class="icon"><img src="img/导航.png" width="12" height="13"></i>网站导航<b><img src="img/下三角.png" width="12"></b></a></li>
    		</ul>
    	</div>
    </div>
    <div id="header">
        <div id="headerCon">
            <div id="mlogo"><a href="#"><img src="img/logo.png"></a></div>
            <div class="header-ewm">
                <div id="header-ss">
                    <form id="ss-form">
                        <fieldset class="fieldset">
                            <div id="fie-input">
                                <input type="text" placeholder="今年你穿雪地靴了吗？" id="fie-text">
                                <button type="submit">搜索</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div id="header-img">
                    <img src="img/erweima.png" width="190" height="80">
                </div>
            </div>
        </div>
    </div>
    <div id="content">
        <div id="main">
            <div class="crumb">
                <div class="crumbclip">
                    <ul class="crumb-ul">
                        <li><a href="#">首页</a><i class="crumbarr">></i></li>
                        <li><a href="#">珠宝/钻石/翡翠/黄金</a><i>></i></li>
                        <li>
                            <div class="zzhu">
                                <a href="#">海水珍珠</a><i><img src="img/下三角.png" width="12"></i>
                            </div>
                            <i>></i>
                        </li>
                        <li>
                            <form>
                                <label class="crumb-label">
                                    <input class="crumb-input" type="text" placeholder="在当前条件下搜索">
                                    <button type="submit" class="crumb-sub"></button>
                                </label>
                            </form>
                        </li>
                    </ul>
                </div>
                <p class="crumb-p">共<span> 9275</span>件相关商品</p>
            </div>
            <form class="navform">
                <div class="navform-att">
                    <div class="form-pinp">
                        <div class="attrKey">品牌</div>
                        <div class="fopin-logo">
                            <div class="pinp-ss">
                                <i><img src="img/放大镜.png" width="15"></i>
                                <input type="text" placeholder="搜索 品牌名称">
                            </div>
                            <ul class="pinp-ul">
                                <li><a href="#"><img src="img/logo1.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo2.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo3.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo4.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo5.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo6.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo7.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo8.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo9.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo10.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo11.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo12.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo13.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo1.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo15.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo16.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo17.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo8.jpg">周大福</a></li>
                                <li><a href="#"><img src="img/logo12.jpg">周大福</a></li>
                            </ul>
                            <div class="av-option op1">
                                <a href="#" class="avo1"><i><img src="img/加.png" width="8"></i>多选</a>
                                <a href="#" class="avo2">更多<i><img src="img/下.png" width="9"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="form-ss">
                        <div class="j_Prop">
                            <div class="attrKey">款式</div>
                            <div class="fopin-logo">
                                <ul class="ss-ul">
                                    <li><a href="#">首饰套装</a></li>
                                    <li><a href="#">胸针</a></li>
                                    <li><a href="#">手镯</a></li>
                                    <li><a href="#">毛衣链</a></li>
                                    <li><a href="#">裸珠</a></li>
                                    <li><a href="#">手链/脚链</a></li>
                                    <li><a href="#">项链</a></li>
                                    <li><a href="#">戒指/指环</a></li>
                                    <li><a href="#">耳饰</a></li>
                                    <li><a href="#">吊坠</a></li>
                                </ul>
                                <div class="av-option op2">
                                    <a href="#" class="avo1"><i><img src="img/加.png" width="8"></i>多选</a>
                                </div>
                            </div>
                        </div>
                        <div class="j_Prop">
                            <div class="attrKey">镶嵌材质</div>
                            <div class="fopin-logo">
                                <ul class="ss-ul">
                                    <li><a href="#">合金镶嵌</a></li>
                                    <li><a href="#">银镶嵌</a></li>
                                    <li><a href="#">未镶嵌</a></li>
                                    <li><a href="#">黄金/K金镶嵌</a></li>
                                </ul>
                                <div class="av-option op3">
                                    <a href="#" class="avo1"><i><img src="img/加.png" width="8"></i>多选</a>
                                </div>
                            </div>
                        </div>
                        <div class="j_Prop">
                            <div class="attrKey">形状</div>
                            <div class="attval">
                                <ul class="ss-ul">
                                    <li><a href="#">扁圆</a></li>
                                    <li><a href="#">异形</a></li>
                                    <li><a href="#">近圆</a></li>
                                    <li><a href="#">米形/水滴形</a></li>
                                    <li><a href="#">圆形</a></li>
                                </ul>
                                <div class="av-option op4">
                                    <a href="#" class="avo1"><i><img src="img/加.png" width="8"></i>多选</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-gend">
                        <div class="huit"></div>
                        <a href="#" class="gdxx">更多选项<i><img src="img/下.png" width="10"></i></a>
                    </div>
                </div>
            </form>
            <div class="filter">
                <a href="#" class="fsort fsort-sur">综合<i><img src="img/下箭头.png" width="10" height="10"></i></a>
                <a href="#" class="fsort">人气<i><img src="img/下箭头.png" width="10" height="10"></i></a>
                <a href="#" class="fsort">新品<i><img src="img/下箭头.png" width="10" height="10"></i></a>
                <a href="#" class="fsort">销量<i><img src="img/下箭头.png" width="10" height="10"></i></a>
                <a href="#" class="fsort">价格<i><img src="img/价格排序.png" width="10" height="10"></i></a>

                <div class="fArea">
                    <s class="fA-label">收货地：</s>
                    <b class="fA-text">北京 </b>
                    <i class="fA-ico"><img src="img/右下-实心.png" width="10"></i>
                </div>
                <form>
                    <div class="fPrice" id="J_FPrice">
                            <b class="fPb-item">
                                <i class="ui-price-plain">¥</i>
                                <input name="start_price" autocomplete="off" maxlength="6" value="" class="j_FPInput" aria-label="最低价" placeholder="请输入最低价" type="text">
                            </b>
                            <i class="fPb-split"></i>
                            <b class="fPb-item">
                                <i class="ui-price-plain">¥</i>
                                <input name="end_price" autocomplete="off" value="" maxlength="6" class="j_FPInput" aria-label="最高价" placeholder="请输入最高价" type="text">
                            </b>
                    </div>
                    <div class="fMenu" id="J_FMenu">
                        <div class="fM-con">
                            <a href="#" class="ui-more-drop-l" >更多<i></i></a>
                            <label><input name="new" type="checkbox"><em>新到商品</em></label>
                            <label><input type="checkbox">包邮</label>


                            <label><input type="checkbox">折扣</label>

                            <label><input type="checkbox">搭配减价</label>
                            <label><input type="checkbox">满就减</label>
                            <label><input type="checkbox">货到付款</label>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
 <!-- 右侧的信息条-->
     <div id="rightbar">
         <a href="#" class="purplecat"><img src="img/purplecat.png"></a>
         <p class="bar-map">
             <span class="metting">会场导航</span>
             <a href="#"><img src="img/nav.png"></a>
         </p>
         <p class="bar-special">
             <a href="#">
                  <span class="mysp">我的特权</span>
                 <img src="img/index8.png">
             </a>
         </p>
        <div class="outer-buycar">
            <div class="bar-buycar">
                <span></span>
                <p>购物车</p>
            </div>
        </div>
         <ul class="bar-smallicon">
             <li>
                 <span class="mymoney">我的资产</span>
             </li>
             <li>
                 <span class="mymoney">我的资产</span>
             </li>
             <li>
                 <span class="mymoney">我的资产</span>
             </li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
         </ul>
     </div>
</body>
</html>